<template>
  
      <el-form ref="form"  label-width="80px" inline>
          <el-form-item label="一级分类" >
            <el-select  placeholder="请输入" @change="handleChange1" v-model='category1Id' :disabled='disabled'>
                <el-option :label="item.name" :value="item.id" v-for='item in category1List' :key='item.id'></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="二级分类">
            <el-select  placeholder="请输入" @change='handleChange2' v-model='category2Id' :disabled='disabled'>
                <el-option :label="item.name" :value="item.id" v-for='item in category2List' :key='item.id'></el-option>
            </el-select>
          </el-form-item>
           <el-form-item label="三级分类">
            <el-select placeholder="请输入"  @change='handleChange3' v-model='category3Id' :disabled='disabled'>
                <el-option :label="item.name" :value="item.id" v-for='item in category3List' :key='item.id'></el-option>
            </el-select>
          </el-form-item>
      </el-form>
 
</template>

<script>
export default {
  name:'Categoryselector',
  props:['disabled'],
  components: {},
  data() {
    return {
        category1List:[],
        category2List:[],
        category3List:[],
        category1Id:null,
        category2Id:null,
        category3Id:null
    };
  },
  computed: {},
  methods: {
      async getCategoryList(){
          const result=await this.$api.category.getCategory1List() 
          this.category1List=result.data
        //   console.log(this.category1List);
      },
      async handleChange1(category1Id){
          this.category2List=[]
          this.category3List=[]
          this.category2Id=null
          this.category3Id=null
          const result=await this.$api.category.getCategory2List(category1Id)
          this.category2List=result.data
          this.$emit('categoryChange',{categoryId:category1Id,level:1})
      },
      async handleChange2(category2Id){
          this.category3List=[]
          this.category3Id=null
          const result=await this.$api.category.getCategory3List(category2Id)
          this.category3List=result.data
          this.$emit('categoryChange',{categoryId:category2Id,level:2})

      },
      handleChange3(category3Id){
          this.$emit('categoryChange',{categoryId:category3Id,level:3})
          
      }

  },
  mounted() {
      this.getCategoryList()
  }
};
</script>
<style scoped>
</style>